/**
 * Created by gengrong on 16/4/14.
 */
import { Button, Form, Input, Row, Col } from 'antd';
import { SmartForm } from 'comps/common';
import * as React from 'react';

const formLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 }
};

class UserChangePasswordForm extends React.Component {

  onSubmit(evt) {
    evt.preventDefault();
    this.props.smartSubmit((values) => {
      return this.props.onSaveChangePassword(values);
    });
  }

  checkPass(rule, value, callback) {
    const form = this.props.form;
    if (form.getFieldValue('password')) {
      form.validateFields(['confirmPassword'], { force: true });
    }
    callback();
  }

  checkPass2(rule, value, callback) {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('两次输入密码不一致！');
    } else {
      callback();
    }
  }

  render() {
    const { getFieldProps } = this.props.form;

    const accountPasswordProps = getFieldProps('accountPassword', {
      rules: [
        { required: true, whitespace: true, message: '请填写当前密码' }
      ]
    });

    const passwordProps = getFieldProps('password', {
      rules: [
        { required: true, whitespace: true, min: 8, message: '请填写新密码, 至少为8位' },
        { validator: ::this.checkPass }
      ]
    });
    const confirmPasswordProps = getFieldProps('confirmPassword', {
      rules: [{
        required: true,
        whitespace: true,
        message: '请再次输入密码'
      }, {
        validator: ::this.checkPass2
      }],
    });

    return (
      <div>
        <Form horizontal form={this.props.form} onSubmit={::this.onSubmit}>
          <Form.Item required label='密码：' {...formLayout}>
            <Input {...accountPasswordProps} placeholder='密码'/>
          </Form.Item>
          <Form.Item required label='新密码：' {...formLayout}>
            <Input {...passwordProps} placeholder='新密码'/>
          </Form.Item>
          <Form.Item required label='确认密码：' {...formLayout}>
            <Input {...confirmPasswordProps} placeholder='确认密码'/>
          </Form.Item>
          <Row>
            <Col span='18' offset='4'>
              <Button loading={this.props.submiting} type='primary' htmlType='submit'>提交</Button>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }
}

UserChangePasswordForm = Form.create()(SmartForm.beSmart()(UserChangePasswordForm));

export default UserChangePasswordForm;
